<template>
  <div class="pointlist-container">
    <div class="search-box">
      <el-row :gutter="20">
        <el-form ref="searchForm" :inline="false" label-position="right" label-width="100px" :model="searchForm">
          <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
            <el-form-item label="指标分类：">
              <searchSelect
                v-model="searchForm.indexClassifyId"
                placeholder="请搜索选择指标分类"
                :loading="classifySelect.loading"
                :options="classifySelect.options"
                :filterable="true"
                :total-pages="classifySelect.total"
                :current.sync="classifySelect.current"
                :size.sync="classifySelect.size"
                style="width: 200px"
                @getOption="getClassifyOptions"
                @clear="classifyClear"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
            <el-form-item label="岗位：">
              <searchSelect
                v-model="searchForm.hontPostId"
                placeholder="请搜索选择岗位"
                :loading="postSelect.loading"
                :options="postSelect.options"
                :filterable="true"
                :total-pages="postSelect.total"
                :current.sync="postSelect.current"
                :size.sync="postSelect.size"
                style="width: 200px"
                @getOption="getpostOptions"
                @clear="postClear"
              />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="7" :md="7" :lg="7" :xl="7">
            <el-form-item label="指标名称">
              <el-input v-model.trim="searchForm.indexName" placeholder="请输入指标名称" clearable />
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :xs="24" :sm="3" :md="3" :lg="3" :xl="3" style="text-align:right">
          <el-button size="small" type="primary" :loading="searchLoad" @click="handleSearch('searchForm')">搜索
          </el-button>
        </el-col>
      </el-row>
    </div>
    <div class="table-box">
      <el-table
        ref="multipleTable"
        :data="tableData"
        stripe
        tooltip-effect="dark"
        style="width: 100%"
        :max-height="500"
        :row-key="
          (row) => {
            return row.id
          }
        "
        @selection-change="handleSelectionChange"
        @row-click="handleClickTableRow"
      >
        <el-table-column type="selection" width="55" :reserve-selection="true" />
        <el-table-column prop="indexName" label="" show-overflow-tooltip />
        <el-table-column prop="indexScore" label="" width="100" />
      </el-table>
      <pagination
        v-if="totalPages > 0"
        :total="totalPages"
        :page.sync="listQuery.pageNumber"
        :limit.sync="listQuery.pageSize"
        :layout="pageLayout"
        @pagination="handlePageClick"
      />
    </div>
    <div class="bottom-box">
      <div>已选择：{{ multipleSelection.length }}个</div>
      <div>
        <el-button size="small" @click="handleCancel">取消</el-button>
        <el-button size="small" type="primary" @click="handleSave">确定</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import searchSelect from '@/components/SearchSelect'
import Pagination from '@/components/Pagination'
export default {
  components: {
    searchSelect,
    Pagination
  },
  props: {
    list: {
      type: Array,
      default: () => {
        return []
      }
    },
    visible: {
      type: Boolean,
      default: false
    },
    indexType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      postShow: true,
      classShow: true,
      searchForm: {
        indexClassifyId: '',
        hontPostId: '',
        indexName: '',
        indexType: null
      },
      searchLoad: false,
      classifySelect: {
        options: [],
        loading: false,
        total: 0,
        current: 1,
        size: 20
      },
      postSelect: {
        options: [],
        loading: false,
        total: 0,
        current: 1,
        size: 50
      },
      tableData: [],
      totalPages: 0,
      listQuery: {
        pageNumber: 1,
        pageSize: 10
      },
      pageLayout: 'total, prev, pager, next, jumper',
      multipleSelection: []
    }
  },
  watch: {
    visible: {
      handler(newval, oldval) {
        if (newval === true) {
          this.initSelectOption()
          setTimeout(() => {
            const params = this.getParams()
            this.getList(params)
          }, 1000)
        }
      },
      immediate: true,
      deep: true
    }
  },

  methods: {
    // 清除
    classifyClear() {
      this.searchForm.indexClassifyId = ''
      this.$forceUpdate()
    },
    // 岗位清除
    postClear() {
      this.searchForm.hontPostId = ''
      this.$forceUpdate()
    },
    // 点击整行勾选
    handleClickTableRow(row, event, column) {
      if (!row.disabled) {
        this.$refs.multipleTable.toggleRowSelection(row)
      } else {
        console.log('已添加了该耗材')
      }
    },
    initSelectOption() {
      this.classifySelect.current = 1
      this.postSelect.current = 1

      this.getClassifyOptions({
        current: this.classifySelect.current,
        size: this.classifySelect.size
      })
      this.getpostOptions(
        {
          pageInfo: {
            current: this.postSelect.current,
            size: this.postSelect.size
          }

        }
      )
    },
    // 获取岗位
    getpostOptions(data) {
      const {
        pageInfo,
        searchValue
      } = data
      const params = Object.assign({}, pageInfo)
      if (searchValue) params.title = searchValue
      this.postSelect.loading = true
      this.$Http.getByCondition(params).then((response) => {
        this.postSelect.loading = false
        const {
          result
        } = response

        this.postSelect.total = result.totalElements
        if (Array.isArray(result.content)) {
          this.postSelect.options = result.content.map((info) => {
            return {
              value: info.id,
              label: info.title,
              id: info.id
            }
          })
          if (this.postShow) {
            this.postSelect.options.forEach((item, index) => {
              if (item.label === '员工') {
                this.searchForm.hontPostId = item.id
                this.postShow = false
              }
            })
          }
        }
      })
        .catch((error) => {
          this.postSelect.loading = false
          console.log(error)
        })
    },
    // 获取指标分类
    getClassifyOptions(data) {
      const {
        pageInfo,
        searchValue
      } = data
      const params = Object.assign({}, pageInfo)
      if (searchValue) params.indexClassifyName = searchValue
      this.classifySelect.loading = true
      this.$Http.getIndex_Classification(params).then((response) => {
        this.classifySelect.loading = false
        const {
          result
        } = response
        this.classifySelect.total = result.totalRows
        if (Array.isArray(result.resultData)) {
          this.classifySelect.options = result.resultData.map((info) => {
            return {
              value: info.id,
              label: info.indexClassifyName,
              id: info.id
            }
          })
          if (this.classShow) {
            this.searchForm.indexClassifyId = this.classifySelect.options[0].id
          }

          // console.log(' this.searchForm.indexClassifyId', this.searchForm.indexClassifyId)
        }
      })
        .catch((error) => {
          this.classifySelect.loading = false
          console.log(error)
        })
    },
    toggleSelection(rows) {
      if (rows) {
        rows.forEach(row => {
          this.$refs.multipleTable.toggleRowSelection(row)
        })
      } else {
        this.$refs.multipleTable.clearSelection()
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getParams() {
      const query = {}
      const {
        listQuery
      } = this
      this.searchForm.indexType = this.indexType
      const searchForm = this.searchForm
      for (const i in searchForm) {
        query[i] = searchForm[i]
      }

      return Object.assign({}, query, listQuery)
    },
    handlePageClick() {
      const params = this.getParams()
      this.getList(params)
    },
    async getList(params) {
      if (this.searchLoad) return
      this.searchLoad = true
      try {
        const res = await this.$Http.getindexList(params)
        const {
          result
        } = res
        if (result && result.resultData) {
          this.tableData = result.resultData
          this.totalPages = result.totalRows
          this.initTableSelectData()
        }
        this.searchLoad = false
      } catch (err) {
        this.searchLoad = false
        console.log('err', err)
      }
    },
    handleSearch() {
      this.listQuery.pageNumber = 1
      const params = this.getParams()
      this.getList(params)
    },
    handleCancel() {
      this.multipleSelection = []
      this.$emit('close')
    },
    handleSave() {
      this.$emit('save', this.multipleSelection)
      this.$nextTick(() => {
        this.handleCancel()
      })
    },
    initTableSelectData(idList) {
      const {
        list
      } = this
      if (list.length > 0) {
        this.$nextTick(() => {
          this.tableData.forEach((item) => {
            this.list.map((it) => {
              if (item.id === it.id) {
                this.$refs.multipleTable.toggleRowSelection(item, true)
              }
            })
          })
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  .bottom-box {
    margin-top: 20px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
</style>
